<template>
  <view>
    <z-paging
      ref="paging"
      style="background-color: #eeeeef"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar title="团购商家" title-size="36" :border-bottom="false">
          <view class="slot-wrap">
            <view style="width: 690rpx; overflow: auto">
              <view class="location dis-flex flex-y-center" @click="onCity">
                <u-icon
                  style="vertical-align: middle; margin-right: 10rpx"
                  name="/static/dw-g.png"
                  size="30rpx"
                  mode=""
                ></u-icon>
                <text class="address u-line-1">{{
                  address.cityName ? subCity(address.cityName) : '选择'
                }}</text>
                <u-icon
                  style="margin-left: 10rpx"
                  name="arrow-down"
                  color="#333333"
                  size="26"
                ></u-icon>
              </view>
            </view>
          </view>
        </u-navbar>
        <view class="searchView" @click="onSearch">
          <u-search
            placeholder="搜索所需商品"
            height="64"
            v-model="keywords"
            :show-action="true"
            style="width: 100%"
          ></u-search>
        </view>
      </view>

      <u-gap height="20" bg-color="#F0F1F2"></u-gap>
      <view class="shaixun-box">
        <view class="sx-l">
          <view
            class="sx-item mar-20"
            @click="onSortField(1)"
            :style="sortField == 1 ? 'color:#10A28F;' : ''"
          >
            <text>综合排序</text>
            <u-icon style="margin-left: 10rpx" name="arrow-down" color="#333333" size="16"></u-icon>
          </view>
        </view>
        <u-dropdown ref="uDropdown" active-color="#10A28F" @open="open" @close="close">
          <u-dropdown-item v-model="value1" title="默认排序" :options="options1"></u-dropdown-item>
          <!-- <u-dropdown-item  v-model="value2" title="全部筛选" :options="options2"></u-dropdown-item> -->
        </u-dropdown>
      </view>
      <view class="goods_area">
        <view
          class="goods_box"
          @click="routeToShop(item)"
          v-for="(item, index) in itemList"
          :key="index"
        >
          <view class="goods_box_detail dis-flex">
            <view class="store-image">
              <view style="border: 1rpx solid #f3f4f6; border-radius: 10rpx">
                <u-image
                  :src="item.logo"
                  mode=""
                  width="200rpx"
                  height="200rpx"
                  border-radius="10"
                ></u-image>
              </view>
              <view class="store-label" v-if="Boolean(item.new)">新店</view>
            </view>
            <view style="padding-left: 20rpx; flex: 1">
              <view class="goods_title oneline-hide">
                {{ item.name }}
              </view>
              <view
                style="width: 100%; margin: 8rpx 0"
                class="dis-flex flex-x-center flex-y-between"
              >
                <view class="star dis-flex flex-y-center">
                  <u-image
                    style="margin-bottom: 4rpx"
                    src="@/static/1.png"
                    width="28rpx"
                    height="28rpx"
                  ></u-image>
                  <text class="goods-star">{{ item.score }}分</text>
                </view>
                <view class="sale-item">
                  <text>月销{{ item.salesCountPerMonth }}</text>
                </view>
                <view class="sale-item" v-if="item.distance">
                  <text>{{ item.distanceFormat }}</text>
                </view>
              </view>
              <view style="width: 100%; margin-bottom: 10rpx" class="dis-flex flex-y-center">
                <view class="sale-item" style="margin-right: 50rpx">
                  <text>{{ item.categoryName }} {{ item.detailAddress }}</text>
                </view>
                <view class="sale-item" v-if="item.avgConsumePrice">
                  <text> ¥{{ (item.avgConsumePrice * 0.01).toFixed(0) }}/人</text>
                </view>
              </view>

              <view class="goods_tip">
                <view
                  class="tip oneline-hide-1"
                  v-for="(packages, p) in item.grouponPackages"
                  :key="p"
                >
                  <text class="vip">VIP</text>
                  <text class="price">¥{{ (packages.vipPrice * 0.01).toFixed(2) }}</text>
                  <text class="tl"
                    >原价:¥{{ (packages.price * 0.01).toFixed(2) }} &nbsp;{{ packages.name }}</text
                  >
                </view>
              </view>
            </view>
          </view>
          <view class="laba dis-flex flex-y-center" v-if="item.notice">
            <u-image
              style="margin-right: 10rpx"
              src="@/static/ts.png"
              width="32rpx"
              height="28rpx"
            ></u-image>
            <view>{{ item.notice }}</view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      keywords: '',
      current: 0,
      value1: 1,
      value2: 2,
      options1: [
        {
          label: '默认排序',
          value: 1
        },
        {
          label: '距离优先',
          value: 2
        },
        {
          label: '价格优先',
          value: 3
        }
      ],
      options2: [],
      tabsList: [
        {
          name: '附近美食',
          status: '',
          categoryCode: 'food'
        },
        {
          name: '酒店住宿',
          status: 0,
          categoryCode: 'hotel'
        },
        {
          name: '休闲娱乐',
          status: 0,
          categoryCode: 'entertainment'
        },
        {
          name: '家政服务',
          status: 0,
          categoryCode: 'housekeeping'
        }
      ],
      itemList: [],
      address: {
        cityName: '',
        cityCode: ''
      },
      imgStyle: {
        width: '12rem'
      },
      sortField: null,
      scoreType: 0, // 好评率
      sortType: 'random'
    }
  },
  onLoad() {
    this.address = uni.getStorageSync('address') || {}
    this.queryList(1)
  },
  methods: {
    subCity(city) {
      return city.length > 4 ? city.substr(0, 4) + '...' : city
    },
    onCity() {
      uni.$on('selectAddress', (res) => {
        console.log('selectAddress=' + JSON.stringify(res))
        this.address = res
        this.queryList(1)
        uni.$off('selectAddress')
      })
      uni.navigateTo({
        url: '/other/select-city/select-city'
      })
    },
    tabsChange(index) {
      this.current = index
      this.queryList(1)
    },
    routeTo(url) {
      uni.navigateTo({
        url: url
      })
    },
    isArray(array) {
      return Object.prototype.toString.call(array) === '[object Array]'
    },
    onSearch() {},
    open(index) {
      // 展开某个下来菜单时，先关闭原来的其他菜单的高亮
      // 同时内部会自动给当前展开项进行高亮
      this.$refs.uDropdown.highlight()
      this.sortField = null
    },
    close(index) {
      // 关闭的时候，给当前项加上高亮
      // 当然，您也可以通过监听dropdown-item的@change事件进行处理
      this.$refs.uDropdown.highlight(index)
    },
    onSortField(index) {
      this.sortField = index
      // if (index == 1)
      // 	this.sortAsc = !this.sortAsc
      // else {
      // 	this.sortAsc = false
      // }
      this.$refs.uDropdown.highlight()
      this.queryList()
    },
    urlEncode(obj = {}) {
      const result = []
      for (const key in obj) {
        const item = obj[key]
        if (!item) {
          continue
        }
        if (this.isArray(item)) {
          item.forEach((val) => {
            result.push(key + '=' + val)
          })
        } else {
          result.push(key + '=' + item)
        }
      }
      return result.join('&')
    },
    routeToCate(item) {
      let query = this.urlEncode(item)

      uni.navigateTo({
        url: '/lianmeng/store-list-waimai-cate?' + query
      })
    },
    queryList(pageNo = 1, pageSize = 10) {
      if (pageNo === 1) {
        this.itemList = []
      }
      this.$u.api
        .getStoreList({
          categoryCode: this.tabsList[this.current].categoryCode,
          pageNo,
          pageSize,
          groupon: true,
          keyword: this.keywords,
          scoreType: this.scoreType,
          sortType: this.sortType,
          cityCode: this.address?.cityCode || ''
        })
        .then((res) => {
          this.$refs.paging.complete(res.data.list)
        })
    },
    routeToShop(item) {
      if (item.categoryCode == 'food') {
        uni.navigateTo({
          url: '/dine/diancan/diancanv2?shopId=' + item.id
        })
      } else if (item.categoryCode == 'housekeeping') {
        uni.navigateTo({
          url:
            '/other/merchant-center/merchant-center-service?id=' +
            item.id +
            '&shop=' +
            JSON.stringify(item.shop)
        })
      } else if (item.categoryCode == 'hotel') {
        uni.navigateTo({
          url:
            '/other/merchant-center/merchant-center-hotel?id=' +
            item.id +
            '&shop=' +
            JSON.stringify(item.shop)
        })
      } else if (item.categoryCode == 'entertainment') {
        uni.navigateTo({
          url:
            '/other/merchant-center/merchant-center-yule?id=' +
            item.id +
            '&shop=' +
            JSON.stringify(item.shop)
        })
      } else if (item.categoryCode == 'mall') {
        uni.navigateTo({
          url: '/shops/store?shopId=' + item.id
        })
      } else {
        uni.navigateTo({
          url: '/other/merchant-center/merchant-center?id=' + item.id
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
page {
  background-color: #f0f0f0;
}

.address {
  font-size: 30rpx;
}

.searchView {
  padding: 13rpx 20rpx;
  background-color: #fff;
}

.card {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}

.service {
  padding: 20rpx 0 20rpx 0;
  height: 180rpx;

  .item {
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: column;

    .name {
      font-size: 26rpx;
      color: #333333;
    }
  }
}

.goods_area {
  .goods_box {
    /* width: 100%; */
    background: #ffffff;
    border-radius: 10rpx;
    padding: 20rpx;
    margin: 0 20rpx;
    margin-bottom: 20rpx;
  }

  .store-image {
    position: relative;
  }

  .store-label {
    position: absolute;
    top: 8rpx;
    right: 8rpx;
    width: 60rpx;
    height: 30rpx;
    background: #ed624f;
    border-radius: 10rpx;
    font-size: 20rpx;
    color: #ffffff;
    text-align: center;
    line-height: 30rpx;
  }

  .goods_title {
    font-size: 30rpx;
    color: #333333;
  }

  .laba {
    font-size: 20rpx;
    color: #999999;
    padding: 30rpx 0 10rpx 0;
  }

  .goods_price {
    font-size: 25rpx;
    color: red;
    display: flex;
  }

  .price_tip {
    font-size: 35rpx;
  }

  .sales-volume1 {
    color: #999999;
  }

  .price_main {
    font-size: 36rpx;
  }

  .price_dot {
    align-self: flex-end;
  }

  .goods_tip {
    .tip {
      margin-top: 10rpx;

      .vip {
        font-size: 20rpx;
        color: #ffffff;
        background: #fa453c;
        border-radius: 10rpx;
        padding: 2rpx 6rpx;
      }

      .price {
        font-weight: 600;
        font-size: 32rpx;
        color: #fa453c;
        margin-left: 4rpx;
      }

      .tl {
        font-size: 28rpx;
        color: #333333;
      }
    }
  }

  .goods_old_price {
    color: #89898a;
  }

  .storeName {
    font-size: 26rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 98px;
    margin-left: 10rpx;
    margin-right: 10rpx;
    margin-top: -4rpx;
  }

  .cabinetName {
    height: 30rpx;
    background: #ffffff50;
    border-radius: 5rpx;
    padding: 0px 10rpx;
    font-size: 22rpx;
    font-weight: 400;
    color: #ffffff;
    margin-right: 10rpx;
  }

  .goods-star {
    font-size: 30rpx;
    color: #333333;
    margin-left: 8rpx;
  }

  .sale-item {
    font-size: 24rpx;
    color: #666666;
    /* margin-right: 50rpx; */
  }
}

.hot {
  font-weight: 600;
  font-size: 32rpx;
  color: #333333;
  margin-bottom: 30rpx;
  padding-top: 10rpx;
  margin-left: 20rpx;
}

.shaixuan {
  padding: 0 20rpx 20rpx 20rpx;

  .sx-item {
    // width: 130rpx;
    height: 60rpx;
    background: #ffffff;
    border-radius: 10rpx;
    line-height: 60rpx;
    padding: 0 12rpx;
    font-size: 28rpx;
    color: #333333;
  }

  .mar-20 {
    margin-right: 20rpx;
  }
}

.shaixun-box {
  position: relative;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;

  .sx-l {
    display: flex;
    position: absolute;
    top: 10rpx;
    left: 20rpx;
    justify-content: flex-start;
    z-index: 999;

    // width: 50%;
    .sx-item {
      height: 30px;
      background: #ffffff;
      border-radius: 5px;
      line-height: 30px;
      padding: 0 6px;
      font-size: 14px;
      color: #333333;
      margin-right: 20rpx;
    }
  }
}

::v-deep.shaixun-box .u-dropdown .u-dropdown__menu {
  justify-content: space-between;
  padding-left: 26%;

  .u-dropdown__menu__item {
    // width: 25%;
    flex: none;

    .u-flex {
      height: 30px;
      background: #ffffff;
      border-radius: 5px;
      line-height: 30px;
      padding: 0 6px;
      font-size: 14px;
      color: #333333;
    }
  }
}
</style>
